<template>
	<div>
		<div class="title">推荐歌单</div>
		<van-row gutter="6">
			<van-col v-for="item in reList" :key="item.id" span="8">
				<van-image width="100%" height="3rem" fit="cover" :src="item.picUrl" />
				<p class="song_name">{{ item.name }}</p>
			</van-col>
		</van-row>
		<div class="title">最新音乐</div>
		<SongItem v-for="item in newList" :key="item.id" :title="item.name" :label="item.song.artists[0].name"
			:id="item.id"></SongItem>
	</div>
</template>

<script>
import SongItem from '@/components/SongItem.vue'

// 问：导入api/index.js   api/home.js
import { recommendMusic, newSong } from '@/api' // 默认找到 index.js

export default {
	data() {
		return {
			reList: [], // 推荐歌单 数据
			newList: [], // 新音乐 数据
		}
	},
	async created() {
		const { data: res } = await recommendMusic({
			limit: 6, // 数量6条
		})
		console.log(res)

		this.reList = res.result
		const { data: res2 } = await newSong({
			limit: 20,
		})
		console.log(res2)
		this.newList = res2.result
	},
	components: {
		SongItem,
	},
}
</script>

<style scoped>
/* 标题 */
.title {
	padding: 0.266667rem 0.24rem;
	margin: 0 0 0.24rem 0;
	background-color: #eee;
	color: #333;
	font-size: 15px;
}

/* 推荐歌单 - 歌名 */
.song_name {
	font-size: 0.346667rem;
	padding: 0 0.08rem;
	margin-bottom: 0.266667rem;
	line-height: 1.5;
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	/** 对象作为伸缩盒子模型显示 **/
	-webkit-box-orient: vertical;
	/** 设置或检索伸缩盒对象的子元素的排列方式 **/
	-webkit-line-clamp: 2;
	/** 显示的行数 **/
	overflow: hidden;
	/** 隐藏超出的内容 **/
}
</style>
